import React, { memo } from "react";
import { DeployStyle } from "./style";
import { NavLink } from "react-router-dom";
import { getSizeImage } from "@/utils/format-utils";

export default memo(function Deploy(props) {
  return (
    <DeployStyle>
      {props.radioPage ? (
        <div className="djRadioRight-box">
          <p>你可能也喜欢</p>
          <div className="maybeLike">
            {props.catagories !== undefined && props.catagories.code == 200
              ? props.catagories.djRadios.slice(0, 10).map((item, index) => {
                  return (
                    <div key={item.id}>
                      {item.id != props.id ? (
                        <div className="mayBeLikeBox">
                          <NavLink
                            to={{
                              pathname: "/djradio",
                              search: "?id=" + item.id,
                            }}
                          >
                            <img
                              className="maybeLikeImg"
                              src={getSizeImage(item.picUrl, 50)}
                              alt=""
                            />
                          </NavLink>
                          <div className="maybeLikeText">
                            <span>
                              <NavLink
                                to={{
                                  pathname: "/djradio",
                                  search: "?id=" + item.id,
                                }}
                              >
                                {item.name}
                              </NavLink>
                            </span>
                            <span>
                              by&nbsp;
                              <NavLink
                                to={{
                                  pathname: "/user/home",
                                  search: "?id=" + item.dj.userId,
                                }}
                              >
                                {item.dj.nickname}
                              </NavLink>
                              <img
                                className="identityIconUrl"
                                src={
                                  item.dj.avatarDetail !== null
                                    ? getSizeImage(
                                        item.dj.avatarDetail.identityIconUrl,
                                        13
                                      )
                                    : ""
                                }
                                alt=""
                              />
                            </span>
                          </div>
                        </div>
                      ) : (
                        ""
                      )}
                    </div>
                  );
                })
              : ""}
          </div>
        </div>
      ) : (
        <div className="hot-songlist">
          <p>{props.title}</p>
          {props.hotPlaylists.length !== 0
            ? props.hotPlaylists.playlists.slice(0, 5).map((item, index) => {
                return (
                  <div key={item.id} className="hotPlaylist-box">
                    <NavLink
                      to={{
                        pathname: "/discover/playlist/" + item.id,
                      }}
                    >
                      <img src={getSizeImage(item.coverImgUrl, 50)} alt="" />
                    </NavLink>
                    <div className="hot-text">
                      <NavLink
                        to={{
                          pathname: "/discover/playlist/" + item.id,
                        }}
                        className="hot-text-a"
                      >
                        {item.name}
                      </NavLink>
                      <span>by</span>
                      {props.title === "热门歌单" ? (
                        <NavLink
                          to={{
                            pathname: "/user/home",
                            search: "?id=" + item.creator.userId,
                          }}
                        >
                          {item.creator.nickname}
                        </NavLink>
                      ) : (
                        <NavLink
                          to={{
                            pathname: "/user/home",
                            search: "?id=" + item.userId,
                          }}
                        >
                          {item.creator.nickname}
                        </NavLink>
                      )}
                    </div>
                  </div>
                );
              })
            : ""}
        </div>
      )}
    </DeployStyle>
  );
});
